<template>
  <views class="logistics_list">
    <viewTitle :title="'揽件报表'"></viewTitle>
    <div class="search">
      <el-form ref="form" label-width="auto" :inline="true">
        <el-form-item label="揽件时间:">
          <el-date-picker
              v-model="post_date"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="物流企业:">
          <el-input type="text" clearable placeholder="请输入关键字" v-model="company_name"></el-input>
        </el-form-item>
        <el-form-item label="企业类型:">
          <el-select v-model="company_type" clearable placeholder="请选择">
            <el-option
                v-for="item in company_type_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="揽件人:">
          <el-input type="text" clearable placeholder="请输入揽件人姓名" v-model="employee_name"></el-input>
        </el-form-item>
        <el-form-item label="揽件人联系电话:">
          <el-input type="text" clearable placeholder="请输入揽件人联系电话" v-model="employee_mobile"></el-input>
        </el-form-item>
        <el-form-item label="请选择汇总方式:">
          <el-select v-model="group_method" clearable placeholder="请选择">
            <el-option
                v-for="item in group_method_list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn-area">
        <div class="btn-arealeft">
          <el-button type="primary" @click="getData">查询</el-button>
          <el-button @click="reset">重置</el-button>
          <el-button type="warning" @click="export_excel(download_url)">导出列表</el-button>
        </div>
      </div>
    </div>
    <div class="table_list">
      <el-table :data="tableList" style="width: 100%" :header-cell-style="getRowClass">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="company_name" label="承运物流企业"></el-table-column>
        <el-table-column :formatter="(row)=>{return row.company_type == 1 ? '快递':'物流'}" label="企业类型"
                         width="120"></el-table-column>
        <el-table-column prop="legal_person" label="企业法人"></el-table-column>
        <el-table-column prop="legal_phone" label="法人电话"></el-table-column>
        <el-table-column v-if="can_show" prop="employee_name" label="揽件员姓名"></el-table-column>
        <el-table-column v-if="can_show" prop="employee_mobile" label="揽件员电话"></el-table-column>
        <el-table-column prop="num" label="揽件数量"></el-table-column>
      </el-table>
      <div class="flex flexR paging flexbootm">
        <el-pagination
            style="background:#fff; padding:10px 0"
            background
            layout="prev, pager, next,sizes,total, jumper"
            @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
            @current-change="(page_start) => {this.pagination.page_start = page_start;this.getData()}"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.page_size"
            :total="pagination.total_count"
            :current-page="pagination.current_page"
            :page-count="pagination.page_count"
        ></el-pagination>
        <div class="btn-total">总揽件数：<span class="btnnums">{{ttnum}}</span></div>
      </div>
    </div>
  </views>
</template>

<script>
	export default {
		data() {
			return {
				post_date: "", // 揽件时间
				company_name: "",// e: "", // 物流企业
				employee_name: "", // 寄件人
				employee_mobile: "", // 寄件人联系方式
				company_type: null, //企业类型
				group_method: 0, //汇总方式
				pagination: {
					page_start: 0, //搜索开始页码
					current_page: 0, //当前页码
					page_count: 0, //总页数
					page_size: 10, //每页数量
					total_count: 0 //总数量
				},
				group_method_list: [
					{value: 0, label: '按企业汇总'},
					{value: 1, label: '按揽件员汇总'}
				],
				company_type_list: [
					{value: null, label: '全部'},
					{value: 0, label: '物流'},
					{value: 1, label: '快递'}
				],
				tableList: [],
				download_url: "",
				can_show: "",
				ttnum: ""//汇总总数
			}
		},
		methods: {
			// 修改第一行样式
			getRowClass({row, column, rowIndex, columnIndex}) {
				if (rowIndex === 0) {
					return "background: #FAFAFA ";
				} else {
					return "";
				}
			},
			// 修改是否换行
			changeStyleRow(width) {
				let _width = width - 290 - 350 - 300 - 50 - 25;
				if (_width > 300) {
					this.marginLeft = 25;
				} else {
					this.marginLeft = 0;
				}
			},
			// 获取数据
			getData() {
				this.can_show = "";
				this.$raxios.post(this.$mapapi.admin_logisticsReport, {
					data: this.post_data
				}).then(res => {
					if (res.code == 200) {
						this.tableList = res.data.list;
						this.ttnum = res.data.ttnum;
						this.pagination = res.data.pagination;
						this.download_url = res.data.download_url;
						this.can_show = this.post_data.group_method;
					} else {
						this.tableList = [];
						this.pagination = [];
						this.$message.error(res.msg)
					}
				}).catch(res=>{

        })
			},
			// 重置
			reset() {
				this.post_date = '';
				this.company_name = '';
				this.employee_name = '';
				this.employee_mobile = '';
				this.recipients = '';
				this.company_type = null;
				this.group_method = 0;
				this.getData();
			},
			export_excel(download_url) {
				if (download_url) {
					window.open(download_url);
				}
			}
		},
		computed: {
			post_data() {
				let post = {};
				if (this.post_date.length > 0) {
					post.post_date_start = this.post_date[0] / 1000;     //开始时间
					post.post_date_end = this.post_date[1] / 1000;     //结束时间
				}
				post.company_name = this.company_name || '';
				post.company_type = this.company_type || '';
				post.employee_name = this.employee_name || '';
				post.employee_mobile = this.employee_mobile || '';
				post.group_method = this.group_method || 0;
				post.pagination = this.pagination;
				return post;
			}
		},
		mounted() {
			this.getData();
		}
	};
</script>

<style lang="less" :scope="true" src="@/style/logistics_manager/logistics_list.less">
</style>
